<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .panel {
        border: 4px solid #ddd;
        width: 192px;
        margin: 100px auto;
        /*border-radius: 6px;*/
      }
      .panel p, .panel input {
        font-family: "微软雅黑";
        font-size: 20px;
        margin: 4px;
        float: left;
        /*border-radius: 4px;*/
      }
      .panel p {
        width: 122px;
        height: 26px;
        border: 1px solid #ddd;
        padding: 6px;
        overflow: hidden;
      }
      .panel input {
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
      }
    </style>
    <script type="text/javascript">
    	window.onload=function(){
    		//给div绑定单击事件
    		var div=document.getElementById("jsq");
    		div.onclick=function(e){
    			console.log(1);
    			//获取事件源
    			var obj=e.srcElement || e.target;
    			//处理其中的input
    			if(obj.nodeName=="INPUT"){
    				//获取p
    				var p=document.getElementById("screen");
    				if(obj.value=="="){
    					try{
    					p.innerHTML=eval(p.innerHTML);
    					}catch (ex) {
							p.innerHTML="Error";
						}
    				}else if(obj.value=="C"){
    					p.innerHTML="";
    				}else{
    					p.innerHTML+=obj.value;
    				}
    			}
    		}
    		
    	}
    </script>
  </head>
  <body>
    <div class="panel" id="jsq">
      <div>
        <p id="screen"></p>
        <input type="button" value="C">
        <div style="clear:both"></div>
      </div>
      <div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">
        
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">
        
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">
        
        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">
        
        <div style="clear:both"></div>
      </div>
    </div>    
  </body>
</html>